<template>
  <div>
    <!-- 导航条 -->
    <van-sticky>
      <NavBar></NavBar>
    </van-sticky>
    <div class="foot">
      <div>
        <!-- 轮播图 -->
        <van-swipe
          v-if="list.listPicUrl"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item>
            <img :src="list.primaryPicUrl" style="width: 100%; height: 110%" />
          </van-swipe-item>
        </van-swipe>
        <!-- 展示价格 -->
        <div class="pricediv">
          <div class="priceone">
            特价 | 距结束<span style="display: inline-block"
              ><van-count-down millisecond format="HH:mm:ss:SS" :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon"></span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon"></span>
                  <span class="block">{{ timeData.seconds }}</span>
                  <span class="colon"></span>
                  <span class="block">{{ timeData.milliseconds }}</span>
                </template>
              </van-count-down></span
            >
          </div>
          <div class="pricetwo">
            <span>￥</span>
            <span class="spanone">{{ list.counterPrice }}</span>
            <span class="spantwo">{{ list.counterPrice }}</span>
          </div>
        </div>
        <!-- pro会员 -->
        <div class="pro">
          <span
            ><img
              src="https://yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png"
              style="width: 0.4rem"
              alt=""
          /></span>
          <span>Pro会员叠加优惠，再省<span class="proprice">￥XXX</span></span>
          <span class="kaitong">开通</span>
        </div>
        <!-- 评价 -->
        <div>
          <van-row>
            <van-col span="18">
              <div class="eva">
                <div class="evatop">
                  <p class="evaluat">{{ list.name }}</p>
                </div>
                <span class="img1"
                  ><img
                    src="https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png"
                    alt=""
                /></span>
                <span class="img2"
                  ><img
                    src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"
                /></span>
                <span class="img3">网易严选</span>
              </div>
            </van-col>
            <van-col span="6">
              <div class="evaright">
                <div class="left">
                  <span class="span1">99.9%</span>
                  <p class="span2">好评率</p>
                </div>
                <div class="right">
                  <van-icon name="arrow" color="#7f7f7f" size="0.7rem" />
                </div>
              </div>
            </van-col>
          </van-row>
        </div>
        <!-- 推荐理由 -->
        <div class="recommend">
          <p>推荐理由</p>
          <div>
            <ul>
              <li><span>1</span>+、PA++++，阻挡UVA、UVB</li>
              <li><span>2</span>拥有强大的防护力，抵抗光老化</li>
              <li><span>3</span>水感清爽，一触即干，秒速成膜，不怕花妆</li>
              <li><span>4</span>大瓶装拥有320ml容量，从头到脚使用都不心疼</li>
            </ul>
          </div>
        </div>
        <!-- 规则 -->
        <div class="rules">
          <p @click="show = !show">
            规则: <van-badge dot />首单全额返最高返150余额，点击查看<span
              ><van-icon name="arrow"
            /></span>
          </p>
          <van-action-sheet v-model="show" title="标题">
            <div class="content">
              1. 首单全额返仅限从未在网易严选下单的新用户参加；
              <br />
              2.
              活动仅限指定商品参加，且各商品返还金额不同，商品返还的上限是150元余额，具体返还金额以相应商品详情页展示为准。用户购买指定商品完成支付后，商品对应的返还金额将以“余额”形式返还（系统自动返还，实时到账）；
              <br />
              3.“余额”不可提现，可以和红包/优惠券等叠加使用，余额有效期为次月15号后失效，请尽早在有效期内使用，具体您可以在【个人】-【我的资产】-【余额】查看；
              <br />
              4.“余额”可在下单时抵扣使用，最多可抵扣订单金额40%；余额部分商品可抵扣，具体可抵扣商品需在组单页查看。
              <br />
              举例：
              <br />
              用户小严：购买指定商品支付100元，全额返还支付金额100元余额。下一单订单需付金额为100元，则可以抵扣40元余额。即实际支付60元，剩余余额60元。
            </div>
          </van-action-sheet>
        </div>
      </div>
    </div>
    <!-- 邮费、购物返 -->
    <div class="postageshopping">
      <div class="postage">
        <p @click="show2 = !show2">
          邮费：满99包邮<span><van-icon name="arrow" /></span>
        </p>
        <van-action-sheet v-model="show2" title="标题">
          <div class="content">
            1. 首单全额返仅限从未在网易严选下单的新用户参加；
            <br />
            2.
            活动仅限指定商品参加，且各商品返还金额不同，商品返还的上限是150元余额，具体返还金额以相应商品详情页展示为准。用户购买指定商品完成支付后，商品对应的返还金额将以“余额”形式返还（系统自动返还，实时到账）；
            <br />
            3.“余额”不可提现，可以和红包/优惠券等叠加使用，余额有效期为次月15号后失效，请尽早在有效期内使用，具体您可以在【个人】-【我的资产】-【余额】查看；
            <br />
            4.“余额”可在下单时抵扣使用，最多可抵扣订单金额40%；余额部分商品可抵扣，具体可抵扣商品需在组单页查看。
            <br />
            举例：
            <br />
            用户小严：购买指定商品支付100元，全额返还支付金额100元余额。下一单订单需付金额为100元，则可以抵扣40元余额。即实际支付60元，剩余余额60元。
          </div>
        </van-action-sheet>
      </div>
      <div class="shopping">
        <p @click="show2 = !show2">
          购物返：最高返<span style="color: rgb(250, 30, 50)">149积分</span
          ><span class="shopp"><van-icon name="arrow" /></span>
        </p>
        <van-action-sheet v-model="show2" title="标题">
          <div class="content">
            1. 首单全额返仅限从未在网易严选下单的新用户参加；
            <br />
            2.
            活动仅限指定商品参加，且各商品返还金额不同，商品返还的上限是150元余额，具体返还金额以相应商品详情页展示为准。用户购买指定商品完成支付后，商品对应的返还金额将以“余额”形式返还（系统自动返还，实时到账）；
            <br />
            3.“余额”不可提现，可以和红包/优惠券等叠加使用，余额有效期为次月15号后失效，请尽早在有效期内使用，具体您可以在【个人】-【我的资产】-【余额】查看；
            <br />
            4.“余额”可在下单时抵扣使用，最多可抵扣订单金额40%；余额部分商品可抵扣，具体可抵扣商品需在组单页查看。
            <br />
            举例：
            <br />
            用户小严：购买指定商品支付100元，全额返还支付金额100元余额。下一单订单需付金额为100元，则可以抵扣40元余额。即实际支付60元，剩余余额60元。
          </div>
        </van-action-sheet>
      </div>
    </div>
    <!-- 规格数量 -->
    <div class="count">
      <!--  -->
      <div class="postage">
        <p @click="showBase = !showBase">
          请选择规格数量<span><van-icon name="arrow" /></span>
        </p>
        <div class="text">
          <!-- 顶部 -->
          <van-action-sheet
            close-icon="cross"
            v-model="showBase"
            title="欢迎选购"
          >
            <div class="contentchange">
              <van-row>
                <van-col span="8">
                  <div style="margin: 0rem">
                    <img src="../detail/images/01.jpg" width="100%" alt="" />
                  </div>
                </van-col>
                <van-col span="16">
                  <div class="right">
                    <p class="header">每日抄底</p>
                    <p class="price">价格： ￥2599 到手价￥2584</p>
                    <p class="select">已选择：F1-太空灰</p>
                  </div>
                </van-col>
              </van-row>
            </div>
            <!-- 规格 -->
            <div class="cantain">
              <p>规格</p>
              <div class="button">F1-太空灰</div>
              <div class="button">F1-太空灰</div>
              <div class="button">F1-太空灰</div>
              <div class="button">F1-太空灰</div>
              <div class="button">F1-太空灰</div>
            </div>
            <!-- 数量 -->
            <div class="Count">
              <p>数量</p>
              <div class="controls">
                <input
                  autocomplete="off"
                  class="itxt"
                  :value="goodNum"
                  @change="changeGoodNum('input', $event)"
                />
                <a
                  href="javascript:"
                  class="plus"
                  @click="changeGoodNum('recre')"
                  >+</a
                >
                <a
                  href="javascript:"
                  class="mins"
                  @click="changeGoodNum('incre')"
                  >-</a
                >
              </div>
            </div>
            <div class="fixed">
              <van-row>
                <van-col span="6">
                  <span><van-icon size="0.8rem" name="service-o" /></span>
                </van-col>
                <van-col span="18">
                  <div>
                    <p>加入购物车</p>
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-action-sheet>
        </div>
      </div>

      <!--  -->
      <div class="distribution">
        <p @click="showarea = !showarea">
          配送：<span><van-icon name="arrow" /></span>
        </p>
        <van-popup
          confirm="popupConfirm"
          v-model="showarea"
          position="bottom"
          :style="{ height: '30%' }"
        >
          <van-area title="配送至" :area-list="areaList" />
        </van-popup>
      </div>
      <!--  -->
      <div class="note">
        <p>
          备注：<span><van-icon name="arrow" /></span>
        </p>
      </div>
      <!--  -->
      <div class="service">
        <van-row>
          <van-col span="4">
            <div class="left">服务：</div>
          </van-col>
          <van-col span="15">
            <div class="right">
              <p>
                <span><van-badge dot />严选自营</span
                ><span><van-badge dot />七天无忧退换</span>
              </p>
              <p>
                <span><van-badge dot />国内部分地区不可配送</span>
              </p>
            </div>
          </van-col>
          <van-col span="5">
            <div class="arrow">
              <span><van-icon name="arrow" /></span>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="swipe">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="width: 100%; height: 3.5rem"
      >
        <van-swipe-item>
          <img src="./images/01.jpg" style="width: 100%" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="./images/02.jpg" style="width: 100%" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="./images/03.jpg" style="width: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 用户评价 -->
    <div class="appraise">
      <p @click="showappraise = !showappraise">
        用户评价: <van-badge dot />首单全额返最高返150余额，点击查看<span
          ><van-icon name="arrow"
        /></span>
      </p>
      <!-- 评论展示 -->
      <van-action-sheet v-model="showappraise" title="标题">
        <div class="content">
          1. 首单全额返仅限从未在网易严选下单的新用户参加；
          <br />
          2.
          活动仅限指定商品参加，且各商品返还金额不同，商品返还的上限是150元余额，具体返还金额以相应商品详情页展示为准。用户购买指定商品完成支付后，商品对应的返还金额将以“余额”形式返还（系统自动返还，实时到账）；
          <br />
          3.“余额”不可提现，可以和红包/优惠券等叠加使用，余额有效期为次月15号后失效，请尽早在有效期内使用，具体您可以在【个人】-【我的资产】-【余额】查看；
          <br />
          4.“余额”可在下单时抵扣使用，最多可抵扣订单金额40%；余额部分商品可抵扣，具体可抵扣商品需在组单页查看。
          <br />
          举例：
          <br />
          用户小严：购买指定商品支付100元，全额返还支付金额100元余额。下一单订单需付金额为100元，则可以抵扣40元余额。即实际支付60元，剩余余额60元。
        </div>
      </van-action-sheet>
    </div>
    <div class="appraise-head">
      <p class="p1">
        <img src="./images/05.jpg" alt="" /><span>XXXX</span
        ><span><img src="./images/03.jpg" /></span>
      </p>
      <p>2021-04-05 11::55:26 淡蓝色;S (160/80A)</p>
      <p>领口版型好</p>
      <p>展示晒图</p>
    </div>
    <!-- 最后一个网易严选 -->
    <div class="yanxuan">
      <van-row>
        <van-col span="5">
          <img
            style="width: 1rem; margin-left: 0.3rem"
            src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"
            alt=""
          />
        </van-col>
        <van-col span="19">
          <p class="p1">
            <span class="span1">网易智造</span
            ><span class="span2"><van-icon name="arrow" /></span>
          </p>
          <p class="p2">
            网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造网易智造
          </p>
        </van-col>
      </van-row>
    </div>
    <div class="fixed">
      <van-row>
        <van-col span="6">
          <span><van-icon size="0.8rem" name="service-o" /></span>
        </van-col>
        <van-col span="18">
          <div @click="tocart">
            <p>加入购物车</p>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
//导入地区数据
import { areaList } from "@vant/area-data";
import Vue from "vue";
import {
  Lazyload,
  ActionSheet,
  Sku,
  Area,
  Popup,
  Sticky,
  CountDown,
} from "vant";
Vue.use(ActionSheet);
Vue.use(Lazyload);
Vue.use(Sku);
Vue.use(Area);
Vue.use(Popup);
Vue.use(Sticky);
Vue.use(CountDown);
import NavBar from "./NavBar/index.vue";
import { readToken } from "@/utils/auth";
//引入商品详情接口
// import { reqDetailInfo } from "@/api/index";
// import Notify from "path/to/@vant/weapp/dist/notify/notify";
import { reqCategoryDatas } from "../../api";
export default {
  name: "Detail",
  components: {
    NavBar,
  },
  data() {
    return {
      show: true,
      goodNum: 1,
      time: 30 * 60 * 60 * 1000,
      showappraise: false,
      //配送
      showarea: false,
      show: false,
      show2: false,
      show3: true,
      detailInfo: {
        skuInfo: {
          // 解决假报错
          skuImageList: [],
        },
      },
      count: 5,
      // skuData: skuData,
      showBase: false,
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true,
      initialSku: {
        //默认选中
        s1: "30349",
        s2: "1193",
        selectedNum: 3,
      },
      customSkuValidator: () => "请选择xxx!",
      areaList,
      list: {},
    };
  },
  mounted() {
    this.getDeteilList();
    this.showList();
  },
  methods: {
    onAddCartClicked(data) {
      //加入购物车
      // this.$toast("add cart:" + JSON.stringify(data));
      console.log(data);
    },
    onBuyClicked(data) {
      //立即购买
      // this.$toast("buy:" + JSON.stringify(data));
      console.log(data);
    },
    async getDeteilList() {
      try {
        //   let result = await reqDetailInfo(this.count);
        //   this.detailInfo = result.data;
        //   console.log(this.detailInfo);
      } catch (error) {
        console.log(error);
      }
    },
    toDetail() {},
    //配送地区右上确认
    popupConfirm() {
      console.log(111);
    },
    changeGoodNum(goodnumReg, e) {
      if (goodnumReg === "input") {
        const result = goodNumReg.test(e.target.value);
        if (result) {
          this.goodNum = e.target.value * 1;
        } else if (e.target.value > 200) {
          this.goodNum = e.target.value = 200;
        } else {
          this.goodNum = e.target.value = 1;
        }
      } else if (goodnumReg === "recre") {
        if (this.goodNum === 200) {
          alert("不能超过200");
        } else {
          this.goodNum++;
        }
      } else if (this.goodNum === 1) {
        alert("不能小于1");
      } else {
        this.goodNum--;
      }
    },
    tocart() {
      //判断有没有token没有token跳到login
      let arr = readToken();
      if (arr) {
        this.$router.push("/cart");
      } else {
        alert("没有token，回到login");
        this.$router.push("/login");
      }
    },
    showList() {
      let result = this.$route.query.item;
      this.list = this.$route.query.item;
      console.log(result);
    },
  },
};
</script>

<style lang="less" scoped>
// 倒计时
.colon {
  display: inline-block;
  color: rgb(250, 30, 50);
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: rgb(250, 30, 50);
}
.fixed {
  border: #7f7f7f solid 0.01rem;
  width: 100%;
  position: fixed;
  height: 1.4rem !important;
  bottom: 0;
  margin-top: 1.5rem;
  background: #fff;
  line-height: 1.4rem;
  text-align: center;
  z-index: 2;
  p {
    margin-top: 0rem;
    font-size: 0.5rem;
    background: #dd1a21;
    color: #fff;
  }
}
// 动作面板样式
.content {
  padding: 0.16rem 0.16rem 0.16rem;
}
body {
  background: rgba(244, 244, 244, 0.866);
}
.foot {
  background-color: #fff;
  padding-bottom: 0.3rem;
}
.pricediv {
  padding: 0.1rem;
  background-color: rgb(250, 30, 50);
  .priceone {
    color: #fff;
    margin-left: 0.04rem;
    margin-bottom: 0.04rem;
    font-size: 0.1rem;
  }
  .pricetwo {
    // line-height: 50px;
    margin-left: 0.04rem;
    color: #fff;
    font-size: 0.2rem;
    .spanone {
      font-size: 0.8rem;
      font-weight: 700;
    }
    .spantwo {
      margin-left: 0.1rem;
      line-height: 0.1rem;
      padding: 0.15rem;
      font-size: 0.25rem;
      border-radius: 0.5rem;
      background-color: #fff;
      color: rgb(250, 30, 50);
      font-weight: 600;
    }
  }
}
.pro {
  margin: 0.4rem 0.3rem 0.3rem 0.3rem;
  font-size: 0.12rem;
  font-weight: 550;
  line-height: 1rem;
  height: 1rem;
  background: #fff1d2;
  position: relative;
  span {
    margin-left: 0.1rem;
  }
  .proprice {
    color: rgb(250, 30, 50);
  }
  .kaitong {
    position: absolute;
    text-align: center;
    display: inline-block;
    font-size: 0.08rem;
    width: 0.8rem;
    height: 0.25rem;
    color: #f3ca84;
    line-height: 0.25rem;
    font-weight: 700;
    border-radius: 0.3rem;
    padding: 0.2rem;
    background-color: #12161c;
    right: 0.2rem;
    top: 0.2rem;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.5rem;
  text-align: center;
  height: 8.5rem;
  background-color: #fff;
}
.evatop {
  width: 100%;
  .evaluat {
    font-size: 0.4rem;
    color: #333;
    line-height: 0.48rem;
    margin-bottom: 0.04rem;
    margin: 0 0.3rem 0.3rem 0.3rem;
    font-weight: 700;
  }
}
.eva {
  float: left;
  width: 7.5rem;
  line-height: 0.3rem;
  .img1 {
    margin-left: 0.3rem;
  }
  span {
    img {
      width: 0.85rem;
      vertical-align: middle;
    }
  }
  .img2 {
    margin: 0 0.1rem;
    img {
      width: 0.4rem;
    }
  }
  .img3 {
    font-size: 0.3rem;
    color: #7f7f7f;
  }
}
.evaright {
  position: relative;
  .left {
    font-size: 0.5rem;
    width: 0.5rem;
    color: rgb(250, 30, 50);
    font-weight: 550;
    .span2 {
      // display: inline-block;
      width: 1rem;
      // float: right;
      color: #7f7f7f;
      font-size: 0.13rem;
      font-weight: 500;
    }
  }
  .right {
    position: absolute;
    right: 0.3rem;
    top: 0.25rem;
  }
}
.recommend {
  p {
    font-size: 0.3rem;
    margin: 0.1rem 0.3rem;
  }
  div {
    background: #fafafa;
    width: 9rem;
    margin: 0.12rem 0.3rem 0;
    padding: 0.14rem 0.2rem;
    border: 0.01rem solid #e6e6e6;
    ul {
      li {
        font-size: 0.3rem;
      }
      span {
        display: inline-block;
        width: 0.24rem;
        height: 0.24rem;
        border: 0.01rem solid #dd1a21;
        border-radius: 50%;
        text-align: center;
        line-height: 0.24rem;
        font-size: 0.2rem;
        color: #dd1a21;
        font-family: PingFang SC;
        font-weight: 700;
        margin-right: 0.08rem;
        vertical-align: middle;
      }
    }
  }
}
.rules {
  border-top: 0.05rem solid #d9d9d9;
  margin: 0.3rem 0 0.3rem 0;
  p {
    margin: 0.3rem;
    font-size: 0.3rem;
    position: relative;
    span {
      position: absolute;
      right: 0.1rem;
    }
  }
}
.postageshopping {
  margin-top: 0.05rem;
  background: #fff;
  margin-bottom: 0.25rem;
  .postage {
    .text {
      position: absolute;
      z-index: 8;
    }
    border-bottom: 0.05rem solid #d9d9d9;
    // box-sizing: border-box;
    margin-left: 0.3rem;
    height: 1rem;
    p {
      margin: 0.3rem;
      font-size: 0.35rem;
      line-height: 1rem;
      margin-left: 0rem;
      position: relative;
      span {
        position: absolute;
        right: 0.1rem;
      }
    }
  }
  .shopping {
    margin-left: 0.3rem;
    height: 1rem;
    p {
      margin: 0 0.3rem 0.3rem 0.3rem;
      font-size: 0.35rem;
      line-height: 1rem;
      margin-left: 0rem;
      position: relative;
      .shopp {
        position: absolute;
        right: 0.1rem;
      }
    }
  }
}
.count {
  background: #fff;
  .postage {
    border-bottom: 0.05rem solid #d9d9d9;
    margin-left: 0.3rem;
    p {
      margin: 0.3rem 0.3rem 0 0rem;
      margin-left: 0;
      font-size: 0.3rem;
      // padding: 0.3rem;
      height: 1rem;
      line-height: 1rem;
      position: relative;
      span {
        position: absolute;
        right: 0.1rem;
      }
    }
    // xuangou
    .contentchange {
      margin-bottom: -0.6rem;
      .right {
        line-height: 0.1rem;
        .header {
          margin-top: 0rem;
          margin-left: 0.18rem;
          line-height: 1rem;
          display: inline-block;
          color: #fff;
          background-color: #f48f18;
          border-radius: 0.2rem;
          font-size: 0.3rem;
          width: 1.5rem;
          text-align: center;
          height: 0.6rem;
          line-height: 0.6rem;
        }
        .price {
          margin-top: 0.1rem;
          font-size: 0.3rem;
          margin-left: 0.17rem;
          color: #dd1a21;
        }
        .select {
          margin-top: -0.2rem;
          font-size: 0.4rem;
          margin-left: 0.17rem;
        }
      }
    }
    .cantain {
      p {
        font-size: 0.45rem;
        margin-left: 0.2rem;
        margin-bottom: 0.1rem;
      }
      .button {
        padding: 0.15rem;
        display: inline-block;
        border-radius: 0.1rem;
        font-size: 0.2rem;
        border: 2px solid #dd1a21;
        margin: 0.2rem 0.2rem 0 0.2rem;
        color: #dd1a21;
      }
    }
    .Count {
      margin: -0.2rem 0.2rem 0 0.2rem;

      height: 4rem;
      p {
        font-size: 0.45rem;
      }
      .controls {
        width: 2.1rem;
        position: relative;
        float: left;
        margin-right: 0.2rem;
        margin-left: 1rem;
        .itxt {
          width: 2rem;
          height: 1rem;
          border: 0.01rem solid #f48f18;
          color: #555;
          float: left;
          border-right: 0;
          text-align: center;
        }
        .mins {
          position: absolute;
          left: -1rem;
          background-color: aqua;
          width: 1rem;
          height: 1.1rem;
          text-align: center;
          line-height: 1rem;
        }
        .plus {
          position: absolute;
          left: 2rem;
          background-color: aqua;
          width: 1rem;
          height: 1.1rem;
          text-align: center;
          line-height: 1rem;
        }
      }
    }
  }
  .distribution {
    border-bottom: 0.05rem solid #d9d9d9;
    margin-left: 0.3rem;
    p {
      margin: 0.1rem 0.3rem 0rem 0rem;
      margin-left: 0rem;
      font-size: 0.3rem;
      // padding: 0.3rem;
      height: 1rem;
      line-height: 1rem;
      position: relative;
      span {
        position: absolute;
        right: 0.1rem;
      }
    }
  }
  .note {
    border-bottom: 0.05rem solid #d9d9d9;
    margin-left: 0.3rem;
    p {
      margin: 0.1rem 0.3rem 0rem 0rem;
      margin-left: 0rem;
      font-size: 0.3rem;
      // padding: 0.3rem;
      height: 1rem;
      line-height: 1rem;
      position: relative;
      span {
        position: absolute;
        right: 0.1rem;
      }
    }
  }
  .service {
    .left {
      font-size: 0.3rem;
      height: 1rem;
      line-height: 1rem;
      margin-left: 0.3rem;
    }
    .right {
      font-size: 0.3rem;
      p {
        margin: 0.2rem;
        margin-left: -0.4rem;
        span {
          margin-right: 1rem;
        }
      }
    }
    .arrow {
      line-height: 1.5rem;
      margin: 0.15rem 0.3rem 0rem 0rem;
      margin-left: 1.4rem;
      font-size: 0.3rem;
      position: relative;
      span {
        position: absolute;
        right: 0.1rem;
      }
    }
  }
}
.swipe {
  margin: 0.2rem 0;
}
.appraise {
  height: 1rem;
  background: #fff;
  p {
    border-bottom: 0.05rem solid #d9d9d9;
    line-height: 1rem;
    font-size: 0.3rem;
    position: relative;
    margin-left: 0.3rem;
    .span {
      position: absolute;
      right: 0.8rem;
    }
  }
}
.yanxuan {
  height: 4rem;
  position: relative;
  background: #fff;
  margin-top: 0.3rem;
  padding-top: 0.5rem;
  .p1 {
    font-size: 0.5rem;
    font-weight: 800;
    margin-top: 0.1rem;
    position: relative;
    .span2 {
      position: absolute;
      right: 0.1rem;
      font-size: 0.5rem;
    }
  }
  .p2 {
    margin-top: -0.2rem;
    font-size: 0.13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  img {
    margin-top: 0.4rem;
  }
}
.appraise-head {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 4.7rem;
  line-height: 0.1rem;
  img {
    width: 1.5rem;
    border-radius: 50%;
  }
  p {
    margin-left: 0.3rem;
    font-size: 0.3rem;
  }
  .p1 {
    flex-direction: row;
    display: flex;

    align-items: center;
  }
}
</style>
